<template>
  <div class="app-container home">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-area">
      <h1>欢迎使用双碳管理系统</h1>
      <span class="version">当前版本：v{{ version }}</span>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6" class="mb-20">
        <el-card class="stats-card">
          <div class="card-content">
            <span class="label">注册用户</span>
            <span class="value">1,234</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="mb-20">
        <el-card class="stats-card">
          <div class="card-content">
            <span class="label">访问量</span>
            <span class="value">5,678</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="mb-20">
        <el-card class="stats-card">
          <div class="card-content">
            <span class="label">订单量</span>
            <span class="value">9,012</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="mb-20">
        <el-card class="stats-card">
          <div class="card-content">
            <span class="label">碳排放量</span>
            <span class="value">3,456 t</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="chart-card">
          <div id="visitChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div id="sourceChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态 -->
    <el-card class="latest-activity">
      <h3>系统动态</h3>
      <el-timeline>
        <el-timeline-item timestamp="2024/3/1" placement="top">
          系统初始化完成
        </el-timeline-item>
        <el-timeline-item timestamp="2024/3/5" placement="top">
          碳排放监测模块上线
        </el-timeline-item>
        <el-timeline-item timestamp="2024/3/10" placement="top">
          新增数据报表功能
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      version: "1.0.0",
      visitChart: null,
      sourceChart: null
    };
  },
  mounted() {
    this.initCharts();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.visitChart) this.visitChart.dispose();
    if (this.sourceChart) this.sourceChart.dispose();
  },
  methods: {
    initCharts() {
      // 访问量折线图
      this.visitChart = echarts.init(document.getElementById('visitChart'));
      const visitOption = {
        title: {
          text: '周访问趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(64, 158, 255, 0.6)' },
              { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
            ])
          }
        }]
      };

      // 数据来源饼图
      this.sourceChart = echarts.init(document.getElementById('sourceChart'));
      const sourceOption = {
        title: {
          text: '访问来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 548, name: '搜索引擎' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

      this.visitChart.setOption(visitOption);
      this.sourceChart.setOption(sourceOption);
    },
    handleResize() {
      if (this.visitChart) this.visitChart.resize();
      if (this.sourceChart) this.sourceChart.resize();
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;

  .welcome-area {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
    background: #f8f9fa;
    border-radius: 8px;

    h1 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #303133;
    }

    .version {
      color: #909399;
      font-size: 14px;
    }
  }

  .stats-card {
    margin-bottom: 20px;
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .card-content {
      padding: 20px;
      text-align: center;

      .label {
        display: block;
        color: #606266;
        font-size: 14px;
        margin-bottom: 8px;
      }

      .value {
        font-size: 24px;
        color: #409EFF;
        font-weight: bold;
      }
    }
  }

  .chart-card {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .latest-activity {
    margin-top: 20px;

    h3 {
      color: #303133;
      margin-bottom: 20px;
      padding-left: 10px;
      border-left: 4px solid #409EFF;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: #909399;
      font-size: 13px;
    }
  }

  #visitChart,
  #sourceChart {
    width: 100%;
    min-height: 400px;
  }
}
</style>
